<template>
  <div class='container'>
    <el-card class="container-card">
      <el-form ref="form" :model="formInline" class="container-filter" label-width="100px">
        <el-form-item label="关键字">
          <el-input v-model="formInline.tags" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.state" placeholder="请选择">
            <el-option label="启用" value="1" />
            <el-option label="禁用" value="0" />
          </el-select>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button size="small">清除</el-button>
          <el-button type="primary" size="small">搜索</el-button>
          <el-button type="success" @click="onAddCompanys" size="small">新增用户</el-button>
        </el-form-item>
      </el-form>
      <!-- 提示总共信息 -->
      <el-alert
        :title="this.articlesList.countsInfo"
        type="info"
        show-icon
        class="el-alert"
      >
      </el-alert>
      <my-table
        :table-props="{
          data: this.articlesList.items,
          border: true
        }"
        :columns="[
          { label: '序号', prop: 'id', width: 50, align: 'center' },
          { label: '文章标题', prop: 'title',  align: 'center' },
          { label: '阅读数', prop: 'visits',  align: 'center' },
          { label: '录入人', prop: 'username',  align: 'center' },
          { label: '录入时间', prop: 'createTime',  align: 'center' },
          { label: '状态', prop: 'states', align: 'center' },
          { label: '操作', slotName: 'operators', width: 300, align: 'center', fixed: 'right' }, // 带插槽
        ]"
      >
        <template v-slot:operators="scope">
          <el-button type="text" @click="onPreviewOpen(scope.row)">预览</el-button>
          <el-button
            v-if="scope.row.state"
            type="text"
            @click="onDisable(scope.row)"
          >
            禁用
          </el-button>
          <el-button
            v-else
            type="text"
            @click="onDisable(scope.row)"
          >
            启用
          </el-button>
          <el-button type="text" :disabled="!scope.row.state" @click="onAlterPopup(scope.row)">修改</el-button>
          <el-button type="text" :disabled="!scope.row.state" @click="onDeletePopup(scope.row)">删除</el-button>
        </template>
      </my-table>
    </el-card>
    <!-- 新增弹窗 -->
    <el-dialog title="新增文章" :visible.sync="addPopupVisible" width="800px">
      <el-form :model="addFrom">
        <el-form-item label="文章标题" label-width="100" required>
          <el-input v-model="addFrom.title" />
        </el-form-item>
        <el-form-item label="文章内容" required>
          <quill-editor
            v-model="addFrom.articleBody"
            ref="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>
        <el-form-item label="视频地址" label-width="100">
          <el-input v-model="addFrom.videoURL" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addPopupVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPopupOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 预览弹窗 -->
    <el-dialog title="预览文章" :visible.sync="previewPopupVisible" width="800px" >
      <h2>{{ this.previewPopupRow.title }}</h2>
      <div>
        <span class="time">{{ getTime(this.previewPopupRow.createTime) }}</span>
        <span class="username">{{ this.previewPopupRow.username }}</span>
        <i class="el-icon-edit">{{ this.previewPopupRow.visits }}</i>
      </div>
      <el-card class="container-wrapper">
        <div class="container" v-html="this.previewPopupRow.articleBody" />
      </el-card>
    </el-dialog>
    <!-- 修改弹窗 -->
    <el-dialog title="修改文章" :visible.sync="amendPopupVisible" width="800px">
      <el-form :model="addFrom" >
        <el-form-item label="文章标题" label-width="100" required>
          <el-input v-model="addFrom.title" />
        </el-form-item>
        <el-form-item label="文章内容" required>
          <quill-editor
            v-model="addFrom.articleBody"
            ref="myQuillEditor"
            :options="editorOption"
          />
        </el-form-item>
        <el-form-item label="视频地址" label-width="100">
          <el-input v-model="addFrom.videoURL" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="popup-immobilization">
        <el-button @click="amendPopupVisible = false">取 消</el-button>
        <el-button type="primary" @click="amendPopupOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import * as articlesApi from '@/api/hmmm/articles'
import moment from 'moment'

export default {
  data () {
    return {
      formInline: {
        // 标签名称
        tags: '',
        // 状态
        state: ''
      },
      // 新增弹窗数据
      addFrom: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 新增弹窗
      addPopupVisible: false,
      // 预览
      previewPopupVisible: false,
      // 预览弹窗的数据
      previewPopupRow: {},
      // 修改弹窗
      amendPopupVisible: false,
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              [{ list: 'ordered' }, { list: 'bullet' }],
              ['blockquote'],
              ['code-block', 'image', 'link']
            ],
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector('.edit-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  computed: {
    ...mapState('articles', [
      'articlesList',
      'articlesDetails'
    ])
  },
  methods: {
    ...mapActions('articles', [
      'updateBusinessList',
      'updateArticlesDetails'
    ]),
    // 新增按钮
    onAddCompanys () {
      this.addPopupVisible = true
    },
    // 新增弹框里面的确定
    async addPopupOk () {
      await articlesApi.add({
        ...this.addFrom
      })
      this.addPopupVisible = false
      this.updateBusinessList()
      this.addFrom = {}
    },
    // 预览按钮
    onPreviewOpen (row) {
      this.previewPopupVisible = true
      console.log(row)
      this.previewPopupRow = row
      console.log(this.previewPopupRow)
    },
    // 预览弹窗时间处理
    getTime (time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 禁用按钮
    onDisable (row) {
      console.log(row)
      articlesApi.changeState({
        ...row,
        state: row.state ? 0 : 1
      })
        .then(msg => {
          this.$message.success('操作成功')
          this.updateBusinessList()
          return msg
        })
        .catch(err => {
          this.$message.error('操作失败')
          return err
        })
    },
    // 修改按钮
    onAlterPopup (row) {
      this.amendPopupVisible = true
      this.addFrom = row
    },
    // 修改确定按钮
    amendPopupOk () {
      console.log(this.addFrom)
      articlesApi.update(this.addFrom)
        .then(msg => {
          this.$message.success('操作成功')
          this.updateBusinessList()
          return msg
        })
        .catch(err => {
          this.$message.error('操作失败')
          return err
        })
      this.addFrom = {}
      this.amendPopupVisible = false
    },
    // 删除按钮
    onDeletePopup (row) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await articlesApi.remove(row)
          this.updateBusinessList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  created () {
    this.updateBusinessList()
  }
}
</script>

<style scoped lang='scss'>
.time {
  margin-left: 12px;
}
.username {
  display: inline-block;
  margin: 0 16px;
}
::v-deep .el-icon-edit:before {
  margin-right: 12px;
}
// 预览内容包裹器
.container-wrapper {
  margin-top: 12px;
  border-top: 1px dashed #ccc;
  background-color: #f5f5f5;
}

// 新增和修改弹窗
.popup-add {
  display: flex;
  flex-direction: column;

  // 不固定的内容区域
  .popup-unset {
    flex: 1;
    display: flex;

    .popup-text {
      flex: 1;
      overflow: auto;
    }
  }

  .popup-immobilization {
    width: 100%;
    height: 32px;
  }

}
</style>
